<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <link href="/center/static/css/comm.css" rel="stylesheet" type="text/css">
    <link href="/center/static/css/child.css" rel="stylesheet" type="text/css">
	</head>
	<body>
    <div class="main urls" id="main" v-cloak v-if="utoken">
     <div class="hd">
       <h1>链接管理</h1>
     </div>
     <div class="mc">
       <div class="sc">
         <button type="button" class="btnblue" @click="query">查询</button>
         <button type="button" class="btnred" @click="add">添加新链接</button>
       </div>
       <div class="sm">
         <div class="slist" v-if="list[0]">
           <div class="slci" v-for="item in list">
             <div class="alcat">
               <p><img :src="item.img+'?v='+Math.ceil(Math.random()*100)"/></p>
               <p>{{item.url}}</p>
               <p><span>{{item.type}}</span><span>{{item.status == 0 ?'关闭':'启用'}}</span></p>
             </div>
             <div class="sldo">
               <button type="button" class="do btnblue" @click="edit(item)">编辑</button>
             </div>
           </div>
         </div>
         <div class="slist" v-else>
            <p class="nuli">暂未检索到相关内容</p>
         </div>
       </div>
       <div class="spage" v-if="search.pages <= 7">
         <div v-for="n in search.pages" class="spi" :class="{'ck':search.page == n}" @click="toPage(n)">{{n}}</div>
       </div>
       <div class="spage" v-if="search.pages > 7 && search.page <5">
         <div v-for="n in 5" class="spi" :class="{'ck':search.page == n}" @click="toPage(n)">{{n}}</div>
         <div class="spi" @click="toPage(6)">...</div>
         <div class="spi" @click="toPage(search.pages)">{{search.pages}}</div>
       </div>
       <div class="spage" v-if="search.pages > 7 && search.page >=5 && search.page <= search.pages - 4">
         <div class="spi" @click="toPage(1)">1</div>
         <div class="spi" @click="toPage(search.page-2)">...</div>
         <div class="spi" @click="toPage(search.page-1)">{{search.page-1}}</div>
         <div class="spi ck" @click="toPage(search.page)">{{search.page}}</div>
         <div class="spi" @click="toPage(search.page+1)">{{search.page+1}}</div>
         <div class="spi" @click="toPage(search.page+2)">...</div>
         <div class="spi" @click="toPage(search.pages)">{{search.pages}}</div>
       </div>
       <div class="spage" v-if="search.pages > 7 && search.page >=5 && search.page > search.pages - 4">
         <div class="spi" @click="toPage(1)">1</div>
         <div class="spi" @click="toPage(search.pages - 5)">...</div>
         <div class="spi" :class="{'ck':search.page == search.pages - 4}" @click="toPage(search.pages - 4)">{{search.pages-4}}</div>
         <div class="spi" :class="{'ck':search.page == search.pages - 3}" @click="toPage(search.pages - 3)">{{search.pages-3}}</div>
         <div class="spi" :class="{'ck':search.page == search.pages - 2}" @click="toPage(search.pages - 2)">{{search.pages-2}}</div>
         <div class="spi" :class="{'ck':search.page == search.pages - 1}" @click="toPage(search.pages - 1)">{{search.pages-1}}</div>
         <div class="spi" :class="{'ck':search.page == search.pages}" @click="toPage(search.pages)">{{search.pages}}</div>
       </div>
     </div>
     <div class="pope">
       <div class="tage">
         <div class="tse">
           <h5>{{title}}</h5>
           <div class="tade">链接类型：
            <select v-model="item.type">
             <option value="banner">banner</option>
             <option value="smaller">smaller</option>
            </select>
           </div>
           <div class="tade">链接图片：
            <label for="ibann" class="ibann">
              <img :src="ibann"  v-if="ibann"/>
              <span v-else>选择图片</span>
            </label>
            <input id="ibann" accept="image/gif, image/jpeg, image/png, image/jpg" type="file" style="display: none;" @change="chooseIbann"/>
           </div>
           <div class="tade">链接地址：<input type="text" v-model="item.url" /></div>
           <div class="tade">链接顺序：<input type="text" v-model="item.sorts" /></div>
           <div class="tade">链接状态：
            <select v-model="item.status">
             <option :value ="0">关闭</option>
             <option :value ="1">启用</option>
            </select>
           </div>
           <button type="button" class="btnblue" @click="save">保存链接</button>
           <button type="button" class="btngray" @click="clsPop">取消</button>
         </div>
       </div>
     </div>
    </div>
    <script src="/static/lib/jquery/jquery-3.6.0.min.js"></script>
    <script src="/static/lib/vue/vue.min.js"></script>
    <script src="/static/lib/vue/vue-axios.js"></script>
    <script src="/static/lib/vue/axios.min.js"></script>
    <script src="/center/static/js/comm.js?v=1.0"></script> 
     <script src="/center/static/js/api.js"></script>
     <script src="/static/js/popup.js"></script>  
    <script src="/center/static/js/urlList.js?v=1.0"></script>  
	</body>
</html>